<template>
  <div class="h-full flex relative">
    <!-- 左侧文档区域 - 这里是滚动容器 -->
    <div class="flex-1 overflow-y-auto" ref="scrollContainer" id="document-scroll-area">

      <n-space vertical :size="16" class="p-4">
        <div v-if="!member.activistThoughtReports || member.activistThoughtReports.length === 0"
          class="mx-auto bg-gray-50 max-w-[500px] w-full min-w-[500px] aspect-[210/297] shadow-lg rounded-md p-8 md:p-12 flex items-center justify-center  ">
          <n-empty description="暂无思想汇报" />
        </div>

        <div v-for="(report, index) in member.activistThoughtReports" :key="index" :id="`report-page-${index}`"
          class="mx-auto max-w-[500px] w-full min-w-[500px]  bg-gray-50  aspect-[210/297] shadow-lg rounded-md p-8 md:p-12 flex flex-col">

          <h1 class="text-2xl font-bold text-center mb-8">思想汇报{{ index+1 }}</h1>

          <div class="flex-grow break-words">敬爱的党组织：
            自被确定为入党积极分子以来，在党组织的培养教育和身边党员同志的带动下，我不断加强政治理论学习，努力提升思想觉悟，积极向党组织靠拢，在思想、学习、工作和生活等方面都取得了一定的进步。现将近期思想和工作情况向党组织汇报如下：
           <p class="text-center text-gray-400 my-8 py-4 border-y border-gray-200">
                [ 此处省略正文约800字 ]
              </p>
             <n-space vertical align="end" class="mt-8">
            <div class=" font-kaiti">汇报人：{{ member.memberName }}</div>
            <div class="">{{ formatDate(report.signatureDate,'YYYY年MM月DD日') }}</div>
          </n-space>
          </div>

        
        </div>
      </n-space>
    </div>
 <div class="absolute top-4 right-4 w-64 z-10">
      <div class=" p-4 rounded-lg shadow-md">
         <n-anchor :bound="500">
          <n-anchor-link v-for="(report, index) in member.activistThoughtReports" :key="`anchor-${index}`"
            :title="`思想汇报 ${index + 1} (${report.signatureDate || '无日期'})`" :href="`#report-page-${index}`" />
        </n-anchor>
      </div>
    </div>

  </div>
</template>

<script setup>
import { ref } from 'vue';
import { NSpace, NEmpty, NAnchor, NAnchorLink, NAffix } from 'naive-ui';
import { formatDate } from '@/utils/dateUtils';
const documentContainer = ref(null);

defineProps({
  member: {
    type: Object,
    required: true,
    default: () => ({
      memberName: '姓名',
      activistThoughtReports: []
    })
  },
  validation: { type: Array, default: () => [] },
});
</script>

<style scoped>
/* Scoped styles can be added here if needed */
</style>